<template>
  <div class="outside-the-box">
    <div class="contain-box role-box">
      <header>
        职位管理
      </header>
      <div class="main-box">
        <div class="operation search-head">
          <form class="operation-search-form" @submit.prevent="searchRole">
            <el-input placeholder="请输入职位名称" v-model="search_name">
              <el-button slot="append" icon="el-icon-search" @click="searchRole"></el-button>
            </el-input>
          </form>
          <div class="operation-row">
            <div class="operation-block" @click="pushDetails">
              管理员
            </div>
            <div class="operation-block" @click="createRole">
              <i class="text-blue el-icon-circle-plus primary"></i>
              <span>添加职位</span>
            </div>
          </div>
        </div>
        <!-- <role-table class="role-table"></role-table> -->
        <role-list></role-list>
      </div>
    </div>
  </div>

</template>

<script>
import RoleTable from "./table.vue";
import role from "@/api/role.js";
import RoleList from "./list.vue";

export default {
  name: "role-manage",
  components: {
    RoleTable,
    RoleList
  },
  methods: {
    createRole() {
      this.$store.commit("role/CHANGE_IS_CREATE", true);
      this.$store.commit("role/CHANGE_IS_CREATE_DIALOG_SHOW", true);
    },
    searchRole() {
      this.$store.dispatch("role/getRoleList", { name: this.search_name });
      this.search_name = undefined;
    },
    pushDetails() {
      this.$router.push({
        path: "/manage/role/detail",
        query: {
          id: "manage",
          name: "管理员",
          remark: "拥有操作权限系统的功能"
        }
      });
    }
  },
  data() {
    return {
      search_name: undefined
    };
  }
};
</script>

<style>
.role-box {
  width: 84%;
  margin: 20px auto 50px;
}
.role-table {
  margin-top: 15px;
}
</style>
